<script setup lang="ts">

</script>

<template>
  <span class="logo-wrapper">
    <span class="pattern1">Job</span>
    <span class="pattern2">Linker</span>

<!--    <span class="pattern2">Jo</span>-->
<!--    <span style="margin-left: 2px" class="pattern1">bLin</span>-->
<!--    <span class="pattern2">ker</span>-->
  </span>
</template>

<style scoped>
.logo-wrapper {
  display: flex;
  align-items: center;
  .pattern1 {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-primary);
  }
  .pattern2 {
    padding: 5px 2px;
    margin-left: 2px;
    font-size: 30px;
    font-weight: 700;
    color: white;
    background-color: var(--color-primary);
    border-radius: 6px;
    line-height: 30px;
  }
}
</style>